<!DOCTYPE html>

<html lang="en">
  <head>
    <meta charset="utf-8" />

    <title>SQL Formatter</title>
    <meta property="og:title" content="SQL Formatter" />

    <meta name="description" content="A whitespace formatter for different query languages" />
    <meta
      property="og:description"
      content="A whitespace formatter for different query languages"
    />
    <meta property="og:url" content="https://sql-formatter-org.github.io/sql-formatter" />

    <link rel="shortcut icon" href="./prettier-sql-clean.svg" />

    <link href="https://fonts.googleapis.com/css?family=Roboto+Mono" rel="stylesheet" />

    <link href="index.css" rel="stylesheet" />
  </head>

  <body>
    <header>
      <img src="./prettier-sql-clean.svg" height="32" width="32" alt="logo" />
      <h1 class="title">SQL Formatter</h1>

      <div class="buttons">
        <a href="https://www.npmjs.com/package/sql-formatter">
          <img src="https://img.shields.io/npm/v/sql-formatter.svg" height="18" />
        </a>
        <iframe
          src="https://ghbtns.com/github-btn.html?user=sql-formatter-org&repo=sql-formatter&type=star&count=true"
          frameborder="0"
          scrolling="0"
          width="120px"
          height="20px"
          style="position: relative; top: 1px"
        ></iframe>
      </div>
    </header>
    <main>
      <aside class="options-menu">
        <h3 style="margin: 0.5rem 0">Options</h3>
        <div class="select-wrapper">
          <article class="config">
            <label for="tabWidth">Tab width:</label>
            <input type="number" id="tabWidth" name="tabWidth" min="1" max="80" value="2" />
          </article>
          <article class="config">
            <label for="useTabs">Use tabs</label>
            <input type="checkbox" id="useTabs" name="useTabs" />
          </article>
          <article class="config">
            <label for="language">Language:</label>
            <select id="language">
              <option value="sql">SQL</option>
              <!-- dialects -->
              <option value="redshift">AWS Redshift</option>
              <option value="bigquery">BigQuery</option>
              <option value="db2">DB2</option>
              <option value="db2i">DB2 for IBM i</option>
              <option value="hive">Hive</option>
              <option value="mariadb">MariaDB</option>
              <option value="mysql">MySQL</option>
              <option value="tidb">TiDB</option>
              <option value="n1ql">N1QL</option>
              <option value="plsql">PL/SQL</option>
              <option value="postgresql">PostgreSQL</option>
              <option value="singlestoredb">SingleStoreDB</option>
              <option value="snowflake">Snowflake</option>
              <option value="spark">Spark</option>
              <option value="sqlite">SQLite</option>
              <option value="tsql">Transact-SQL</option>
              <option value="trino">Trino</option>
            </select>
          </article>
          <article class="config">
            <label for="keywordCase">Keyword case:</label>
            <select id="keywordCase">
              <option value="preserve">Preserve</option>
              <option value="upper">Upper</option>
              <option value="lower">Lower</option>
            </select>
          </article>
          <article class="config">
            <label for="dataTypeCase">Data type case:</label>
            <select id="dataTypeCase">
              <option value="preserve">Preserve</option>
              <option value="upper">Upper</option>
              <option value="lower">Lower</option>
            </select>
          </article>
          <article class="config">
            <label for="functionCase">Function case:</label>
            <select id="functionCase">
              <option value="preserve">Preserve</option>
              <option value="upper">Upper</option>
              <option value="lower">Lower</option>
            </select>
          </article>
          <article class="config">
            <label for="identifierCase">Identifier case:</label>
            <select id="identifierCase">
              <option value="preserve">Preserve</option>
              <option value="upper">Upper</option>
              <option value="lower">Lower</option>
            </select>
          </article>
          <article class="config">
            <label for="indentStyle">Indentation style:</label>
            <select id="indentStyle">
              <option value="standard">Standard</option>
              <option value="tabularLeft">Tabular, Left</option>
              <option value="tabularRight">Tabular, Right</option>
            </select>
          </article>
          <article class="config">
            <label for="logicalOperatorNewline">AND/OR newlines:</label>
            <select id="logicalOperatorNewline">
              <option value="before">before</option>
              <option value="after">after</option>
            </select>
          </article>
          <article class="config">
            <label for="expressionWidth">Expression width:</label>
            <input
              type="number"
              id="expressionWidth"
              name="expressionWidth"
              min="0"
              max="200"
              value="50"
            />
          </article>
          <article class="config">
            <label for="lineBetweenQueries">Lines between queries:</label>
            <input
              type="number"
              id="lineBetweenQueries"
              name="lineBetweenQueries"
              min="0"
              max="5"
              value="1"
            />
          </article>
          <article class="config">
            <label for="denseOperators">Dense operators</label>
            <input type="checkbox" id="denseOperators" name="denseOperators" />
          </article>
          <article class="config">
            <label for="newlineBeforeSemicolon">Semicolon on separate line</label>
            <input type="checkbox" id="newlineBeforeSemicolon" name="newlineBeforeSemicolon" />
          </article>
        </div>
      </aside>
      <div class="staging">
        <section class="input">
          <textarea id="input" autofocus wrap="off">
select supplier_name,city from
(select * from suppliers join addresses on suppliers.address_id=addresses.id)
as suppliers
where supplier_id>500
order by supplier_name asc,city desc;</textarea
          >
        </section>
        <section class="output">
          <textarea id="output" readonly wrap="off"></textarea>
          <div id="error" class="error"></div>
        </section>
      </div>
    </main>

    <script
      type="text/javascript"
      src="https://unpkg.com/sql-formatter@latest/dist/sql-formatter.min.js"
    ></script>
    <script type="text/javascript" src="index.js"></script>
  </body>
</html>
